import React, { Component } from 'react'
import Header from '../../common/header'
import Footer from '../../common/footer'
import { Row,Col,Tabs,message } from 'antd'
import 'antd/dist/antd.css'
import {
    getSongUrlData,
    getSongData,
    getArtistData
} from '../../api';
import HotWorks from './hotWorks';
import docCookies from '../../api/docCookies';
import MusicPlay from '../../common/MusicPlay';
import AllAlbum from './allAlbum';
import Mvs from './mvs';
import Des from './des';



class Artist extends Component {

    constructor(props) {
        super(props)
        this.state = {
            songCount: 0,
            mvCount:0,
            albumCount:0,
            singerData:0
        }
    }



    startPlaySong = () => {

        const searchStr = this.props.location.search.match(/\d+/gi).toString();
        
        let songId = parseInt(searchStr)

        getSongUrlData(songId).then( (res) => {
            if(res.data.code === 200) {
                let arr = [];
                let storage =  JSON.parse(localStorage.getItem("songUrlData"));
                if(!storage) {
                    arr.push(res.data.data[0])
                    localStorage.setItem('songUrlData',JSON.stringify(arr))
                } else {
                    storage.push(res.data.data[0])
                    localStorage.setItem("songUrlData",JSON.stringify(storage))
                }
                docCookies.setItem("playing","PLAYING");
                this.forceUpdate();
            }else {
                message.info("请求数据失败")
            }
        } );


        getSongData(songId).then( (res) => {
            if(res.data.code===200) {
                let arr = [];
                let storage =  JSON.parse(localStorage.getItem("songInfoData"));
                if(!storage) {
                    arr.push(res.data.songs[0])
                    localStorage.setItem('songInfoData',JSON.stringify(arr))
                    this.forceUpdate();
                }else {
                    storage.push(res.data.songs[0])
                    localStorage.setItem("songInfoData",JSON.stringify(storage))
                }
            }else {
                message.info("请求数据失败")
            }
        })

    };

    
    componentDidMount(){
        this.search = this.props.location.search;
        this.id = this.search.replace("?id=","");
        console.log(this.id)
        getArtistData(this.id).then( (res)=>{
            if(res.data.code===200) {
                this.props.artistDataFunc(res.data)
                this.setState({
                    songCount: res.data.singerData[0].songAmount,
                    albumCount: res.data.singerData[0].albumAmount,
                    mvCount:res.data.singerData[0].mvAmount,
                    singerData:res.data.singerData[0]    
                })
            }else {
                console.log("请求书错误")
            }
        } )
    }

  render() {

    const singerSongsData = this.state.singerData.hotSong;
    const singerAlbumsData = this.state.singerData.allAlbum;
    const singerMvsData = this.state.singerData.mvs;
    const singerDesData = this.state.singerData.briefDes;

    console.log( singerAlbumsData)

    return ( //颜色先不改
      <div className='artist'>
         <div style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}><Header /></div>
        {/* <MusicPlay /> */}

        <div className='artist-content' style={{ marginTop:"20vh",marginBottom:"10vh",minWidth:"1200px" }}>
            <Row>
                <Col span={4}></Col>

                <Col span={16} style={{ backgroundColor:"#fff",padding:"30px",border:"1px solid #D3D3D3",borderTop:"none",boxShadow:"2px 2px 10px"  }}>
                    <Row gutter={10}>
                    {/* 内容左侧 */}
                        <Col span={25}>
                            <div style={{ width:"600px",height:"300px",marginTop:"10px" }}>
                                <span style={{ float:"left",marginRight:"50px"}}>
                                   <img style={{ width:"250px",height:"250px",borderRadius:"125px"}} src={'http://cyq.center:8000/'+this.state.singerData.picUrl} />
                                </span>

                                <span style={{ width: "808px", height: "50px", fontSize:"30px",color:"#000" }}>
                                    {this.state.singerData.name}
                                </span>

                                <div style={{ width:"808px",height:"10px",marginTop:"8px"}}>

                                    <span style={{ color:"#000"}}>简介：</span>

                                 <div className='des1-content' style={{ fontSize:"10px",lineHeight:"17px",textIndent:"20px",marginRight:"50px",marginTop:"7px"}}>
                                     {singerDesData}
                                 </div>
                                 <div style={{ marginTop:"10px",fontSize:"15px"}}>

                                     <span >
                                         <span style={{ color:"#000"}}>单曲：</span> {this.state.songCount}
                                     </span>
                                     <span style={{ marginLeft:"50px"}}>
                                         <span style={{ color:"#000"}}>专辑：</span> {this.state.albumCount}
                                     </span>
                                     <span style={{ marginLeft:"50px"}}>
                                         <span style={{ color:"#000"}}>MV：</span>  {this.state.mvCount}
                                     </span>
                                 </div>
                                </div>
                            </div>
          
                            <div className='artist-tabList'>

                                <Tabs style={{color:"#000"}}>
                                    <Tabs.TabPane tab="热门作品" key="1">
                                        <HotWorks  hotSongs={ singerSongsData||{} } startPlaySong={(id)=>this.startPlaySong(id)}  history={this.props.history}  />
                                    </Tabs.TabPane>
                                    <Tabs.TabPane tab="所有专辑" key="2">
                                        <AllAlbum  hotAlbums={ singerAlbumsData||{} } />
                                    </Tabs.TabPane>
                                    <Tabs.TabPane tab="相关MV" key="3">
                                        <Mvs   singerMvsData={singerMvsData||{}} />
                                    </Tabs.TabPane>
                                    <Tabs.TabPane tab="艺人介绍" key="4">
                                        <Des singerDesData={singerDesData}/>
                                    </Tabs.TabPane>
                                </Tabs>
                            </div>
                        </Col>
     
                    </Row>
                </Col>
                <Col span={4}></Col>
            </Row>

        </div>

         <div className='artist-footer'><Footer /></div>
      </div>
    )
  }
}
export default Artist
